<template>
    <div class="container">
        <Alert>
            <Form :model="searchObj" inline>
                <FormItem>
                    <Input v-model="searchObj.name" class="search-input" clearable placeholder="请输入姓名"/>
                </FormItem>
                <!--<FormItem>
                    <Input v-model="searchObj.card_no" class="search-input" clearable placeholder="请输入身份证号"/>
                </FormItem>
                <FormItem>
                    <Input v-model="searchObj.mobile" class="search-input" clearable placeholder="请输入手机号"/>
                </FormItem>-->
                <FormItem>
                    <Select v-model="searchObj.is_compare" placeholder="请选择状态" style="width:200px">
                        <Option value="">全部</Option>
                        <Option value="0">待比对</Option>
                        <Option value="1">已存在</Option>
                        <Option value="2">不存在</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Button class="search-btn" type="primary" @click="searchAction">
                        <Icon type="ios-search"/>
                        搜索
                    </Button>
                </FormItem>
            </Form>
            <Divider/>
            <Form :model="searchObj" inline>
                <FormItem>
                    <Button class="search-btn" type="primary" @click="addAction">
                        <Icon type="ios-add"/>
                        添加
                    </Button>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="importExcel">
                        <Icon type="ios-cloud-upload-outline"/>
                        数据导入
                    </Button>
                </FormItem>
            </Form>
        </Alert>
        <Row>
            <vxe-toolbar custom></vxe-toolbar>
            <vxe-table
                    ref="xTable"
                    border
                    resizable
                    highlight-hover-row
                    height="500"
                    size="medium"
                    show-overflow="tooltip"
                    :loading="tableLoading"
                    align="center"
                    header-align="center"
                    :sort-config="{trigger: 'cell'}"
                    :data="tableData">
                <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
                <!--<vxe-table-column :field="item.key" :title="item.title" min-width="120"
                                  v-for="(item,index) in tableColumns" :key="index">
                </vxe-table-column>-->
                <vxe-table-column field="name" title="姓名" width="150"></vxe-table-column>
                <vxe-table-column field="card_no" title="身份证号" width="220">
                    <template v-slot="{row}">
                        {{row.card_no ? row.card_no.replace(/^(.{6})(?:\d+)(.{4})$/, '$1****$2') : ''}}
                    </template>
                </vxe-table-column>
                <vxe-table-column field="mobile" title="电话" width="200">
                    <template v-slot="{row}">
                        {{row.mobile ? row.mobile.replace(/^(.{3})(?:\w+)(.{4})$/, '$1****$2') : ''}}
                    </template>
                </vxe-table-column>
                <vxe-table-column field="is_compare" title="状态" width="120">
                    <template v-slot="{row}">
                        <span v-if="row.is_compare == 0">待比对</span>
                        <span style="color: green" v-if="row.is_compare == 1">已存在</span>
                        <span style="color: red" v-if="row.is_compare == 2">不存在</span>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="action" title="操作" min-width="300">
                    <template v-slot="{row}">
                        <ButtonGroup>
                            <!--<Button type="primary" size="small" class="action-btn"
                                    @click="editAction(row)">编辑修改
                            </Button>-->
                            <Button type="error" size="small" class="action-btn"
                                    @click="delAction(row.id)">删除
                            </Button>
                        </ButtonGroup>
                    </template>
                </vxe-table-column>
            </vxe-table>
        </Row>
        <br>
        <Row type="flex" justify="end">
            <Page show-sizer show-total :current="pageObj.pageNo" :page-size="pageObj.pageSize" :total="pageObj.totalRecord"
                  @on-change="getPageNo" :page-size-opts="[10,20,50,200]" @on-page-size-change="pageSizeChange"/>
        </Row>
        <br>
        <option-modal ref="optionModal" :modal-title="modalTitle" :modal-show="modalShow" :modal-type="modalType"
                      :modalWidth="modalWidth" :dataObj="modalData" @cancelOption="cancelOption" @saveOption="saveOption"></option-modal>
    </div>
</template>

<script>
import {
  getHandleList,
  deleteHandle
} from '@/api/pass'
import OptionModal from './components/option-modal'

export default {
  components: { OptionModal },
  data () {
    return {
      modalShow: false,
      modalTitle: '',
      modalWidth: 500,
      modalType: '',
      modalData: {},
      tableColumns: [
        {
          title: '联系人姓名',
          width: 150,
          tooltip: true,
          key: 'name',
          align: 'center'
        },
        {
          title: '身份证号',
          key: 'card_no',
          tooltip: true,
          width: 300,
          align: 'center'
        },
        {
          title: '联系电话',
          width: 150,
          tooltip: true,
          key: 'mobile',
          align: 'center'
        }
      ],
      tableData: [],
      selectData: [],
      tableLoading: false,
      pageObj: {
        pageNo: 1,
        pageSize: 20,
        totalRecord: 0
      },
      searchObj: {}
    }
  },
  props: {},
  mounted () {
    this.init()
  },
  computed: {
    company_code () {
      return this.$store.state.user.severUserInfo.data.company_code
    }
  },
  methods: {
    importExcel () {
      this.$router.push({
        name: 'handleExcel',
        query: { type: 'handle' }
      })
    },
    cancelOption () {
      this.modalShow = false
    },
    saveOption () {
      this.modalShow = false
      this.init()
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    pageSizeChange (e) {
      this.pageObj.pageSize = e
      this.init()
    },
    tableSelectChange (val) {
      this.selectData = val
    },
    initPage () {
      this.pageObj.pageNo = 1
      // this.pageObj.pageSize = 20
    },
    init (data) {
      const obj = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize,
        // card_no: this.$common.xeUtils.trim(this.searchObj.card_no),
        name: this.$common.xeUtils.trim(this.searchObj.name),
        // mobile: this.$common.xeUtils.trim(this.searchObj.mobile),
        is_compare: this.$common.xeUtils.trim(this.searchObj.is_compare)
      }
      let param = data || obj
      this.tableLoading = true
      getHandleList(param).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableLoading = false
          this.tableData = data.data.results
          this.pageObj.totalRecord = data.data.totalRecord
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    searchAction () {
      this.initPage()
      this.init()
    },
    addAction () {
      this.modalTitle = '添加'
      this.modalType = 'add'
      this.modalWidth = 650
      this.modalData = {}
      this.modalShow = true
    },
    editAction (val) {
      this.modalTitle = '编辑修改'
      this.modalType = 'edit'
      this.modalWidth = 650
      this.modalData = this.$common.xeUtils.clone(val)
      this.modalShow = true
    },
    infoAction (val) {
      this.modalTitle = '查看详情'
      this.modalType = 'info'
      this.modalWidth = 800
      this.modalData = this.$common.xeUtils.clone(val)
      this.$refs.optionModal.getBindList(val)
      this.modalShow = true
    },
    delAction (val) {
      this.$Modal.confirm({
        title: '确认删除么？',
        content: '请仔细核对后再操作',
        loading: true,
        onOk: () => {
          this.deleteOne(val)
        }
      })
    },
    deleteOne (val) {
      deleteHandle({ id: val }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.$Modal.remove()
          this.init()
          this.success('删除成功')
        } else {
          this.$Modal.remove()
          this.error(data)
        }
      })
    }
  }

}
</script>

<style scoped>
    .container {
        padding-bottom: 50px;
    }

    .action-btn {
        margin-right: 5px;
        /*margin-bottom: 5px;*/
    }

    .search-input {
        /*width: 180px;*/
    }

    .search-btn {
        /*width: 100px;*/
    }

    /deep/ .ivu-divider-horizontal {
        margin: 12px 0;
    }

    /deep/ .ivu-form-item {
        margin-bottom: 6px;
    }
    /deep/ .ivu-btn-group .ivu-btn {
        border-radius: 3px !important;
    }
</style>
